<template>
	<div class="tpl42-spellGroup">
    <section class="spell_group">
      <img class="hd_img" src="https://img.wifenxiao.com/h5-wfx/images/diy/tpl42/53group_top.jpg"/>
      <ul v-if="tplItemData.dataset">
        <li class="li1" v-for="(item, index) in tplItemData.dataset" :key="index">
          <div class="img_box">
            <img :src="item.pic"/>
            <span v-if="item.people_num">{{ item.people_num }}人团</span>
          </div>
          <div class="act_detail">
            <h2>{{ item.showtitle }}</h2>
            <ul>
              <li class="price">¥<span>{{ item.price }}</span></li>
              <li class="oriPrice">{{ item.oriPrice }}</li>
              <li class="num">已团{{ item.num }}件</li>
            </ul>
            <a v-if="item.is_group_shopping" @click="openLink(item.link)">
              <span class="gojump">去拼团<i></i></span>
            </a>
            <a v-else @click="openLink(item.link)">
              <span class="gojump">去购买<i></i></span>
            </a>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
        openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  .tpl42-spellGroup{
    .spell_group{
      background: #fff;
      .hd_img {
        width: 100%;
        padding: 6px 0 6px;
      }
      ul{
        padding: 0 20px;
        li.li1{
          box-shadow: 0 0 14px #e2e2e2;
          margin-bottom: 30px;
          border-radius: 12px;
          overflow: hidden;
          .img_box{
            position: relative;
            img{
              width: 100%;
            }
            span{
              position: absolute;
              top: 0;
              left: 0;
              background: #fc4f48;
              color: #fff;
              padding: 8px 16px;
              border-bottom-right-radius: 12px;
              line-height: 24px;
            }
          }
          .act_detail{
            padding: 8px 10px 22px;
            position: relative;
            h2{
              color: #333;
              font-size: 32px;
              line-height: 48px;
              padding: 6px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            ul{
              display: -webkit-flex; /* 新版本语法: Chrome 21+ */
              display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
              width: 68%;
              padding: 26px 0;
              float: left;
              .price{
                color: #fc4f48;
                font-size: 40px;
                line-height: 40px;
                margin-top: -4px;
              }
              .oriPrice{
                line-height: 40px;
                color: #383838;
                text-decoration: line-through;
                padding-left: 20px;
                vertical-align: text-bottom;
              }
              .num{
                line-height: 40px;
                padding-left: 20px;
                color: #b2b2b2;
              }
            }
            .gojump{
              display: inline-block;
              padding: 0 14px;
              background: #fc4f48;
              color: #fff;
              height: 54px;
              line-height: 52px;
              border-radius: 24px;
              float: right;
              margin-top: 18px;
              i{
                background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl42/53gojump.png) no-repeat;
                width: 16px;
                height: 20px;
                background-size: contain;
                display: inline-block;
                margin-left: 8px;
              }
            }
          }
        }
      }
    
    }
  }
</style>
